<template>
  <div style="padding: 20px;">
    <el-card shadow="hover" style="background-color: #dddddd">
      <template #header>
        <div style="font-weight: bold; font-size: 16px;">查看维修表 & 新增维修记录</div>
      </template>
      <el-card>
        <template #header>
          <div style="font-size: 14px;">新增维修记录</div>
        </template>
        <!-- 新增维修记录表单 -->
        <el-form :model="form" label-width="120px" :rules="rules" ref="repairForm" style="margin-bottom: 20px;">
          <el-form-item label="器械ID" prop="seid">
            <el-input v-model.number="form.seid" type="number" placeholder="请输入器械ID" />
          </el-form-item>

          <el-form-item label="备注" prop="note">
            <el-input
                v-model="form.note"
                type="textarea"
                :rows="3"
                placeholder="请输入维修备注信息"
                maxlength="200"
                show-word-limit
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm">提交记录</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card style="margin-top: 30px">
        <template #header>
          <div style="font-size: 14px;">查看维修表</div>
        </template>
        <!-- 查询条件 -->
        <el-form inline style="margin-bottom: 20px;">
          <el-form-item label="器械ID">
            <el-input v-model.number="query.seid" placeholder="输入器械ID搜索" clearable @keyup.enter="fetchRepairs" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="query.note" placeholder="输入备注搜索" clearable @keyup.enter="fetchRepairs" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetchRepairs">查询</el-button>
            <el-button @click="clearQuery">清空</el-button>
          </el-form-item>
        </el-form>

        <!-- 维修记录表格 -->
        <el-table :data="repairList" border style="width: 100%" v-loading="loading">
          <el-table-column prop="seid" label="器械ID" width="120" />
          <el-table-column prop="note" label="维修备注" />
          <el-table-column prop="createTime" label="创建时间" width="160" />
          <el-table-column prop="updateTime" label="最后修改时间" width="160" />
        </el-table>

        <!-- 分页器 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        />
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import request from '@/utils/request';
import {ElMessage} from 'element-plus';

// 表单数据
const form = ref({
  seid: null,
  note: ''
});

const rules = ref({
  seid: [
    {required: true, message: '请输入器械ID', trigger: 'blur'},
    {type: 'number', message: '器械ID必须为数字', trigger: 'change'}
  ],
  note: [
    {required: true, message: '请输入维修备注', trigger: 'blur'},
    {min: 4, message: '备注至少需要4个字符', trigger: 'blur'}
  ]
});

const repairForm = ref(null);

// 提交新增
const submitForm = async () => {
  try {
    await repairForm.value.validate();
    const res = await request.post('/v1/staff/repair/add', form.value);
    if (res.state === 2001) {
      ElMessage.success('维修记录添加成功');
      fetchRepairs();
      resetForm();
    } else {
      ElMessage.error(res.message || '添加失败');
    }
  } catch (error) {
    if (error.name !== 'ValidateError') {
      ElMessage.error('请求出错');
      console.error(error);
    }
  }
};

// 重置表单
const resetForm = () => {
  repairForm.value.resetFields();
};

// 查询维修记录
const repairList = ref([]);
const loading = ref(false);
const total = ref(0);

const query = ref({
  seid: null,
  note: '',
  pageNum: 1,
  pageSize: 5
});

// 获取维修记录
const fetchRepairs = async () => {
  try {
    loading.value = true;
    const res = await request.get('/v1/staff/repair/all', {
      params:query.value,
    });
    if (res.state === 2001) {
      repairList.value = res.data.repairList || [];
      total.value = res.data.total || 0;
    }
  } catch (error) {
    console.error('请求失败:', error);
  } finally {
    loading.value = false;
  }
};

// 清除查询条件
const clearQuery = () => {
  query.value.seid = null;
  query.value.note = null;
  fetchRepairs();
};

const handleSizeChange = (val) => {
  query.value.pageSize = val;
  fetchRepairs();
};

const handleCurrentChange = (val) => {
  query.value.pageNum = val;
  fetchRepairs();
};

onMounted(fetchRepairs);
</script>
